<template>
  <el-container>
    <el-header>
      <h2>值班后总结</h2>
    </el-header>
    <el-main>
      <el-card shadow="hover" style="margin-bottom: 1em" v-if="false">
        <div slot="header" class="clearfix">
          <span>纠违数据统计</span>
        </div>
        <el-row>
          <el-col :xs="24" :sm="12" :md="6">
            <digit-pad title="总记录数" :value="source.length" />
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <digit-pad
              title="本季记录"
              :value="countSource(getDateRange({ type: 'season' }))"
            />
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <digit-pad
              title="本月记录"
              :value="countSource(getDateRange({ type: 'month' }))"
            />
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <digit-pad
              title="今日新增"
              :value="countSource(getDateRange({}))"
            />
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="hover" style="margin-bottom: 1em">
        <div slot="header" class="clearfix">
          <span>记录情况</span>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            circle
            plain
            size="mini"
            style="float: right"
            @click="$refs.dailyView.refreshCalculatedSource()"
          ></el-button>
        </div>
        <daily-view ref="dailyView" />
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import DigitPad from "./components/DigitPad";
import DailyView from "./components/DailyView";
import { getDateRange } from "@/utils/date.js";
export default {
  components: {
    // DigitCard
    DigitPad,
    DailyView,
  },
  computed: {
    source() {
      return this.$store.getters.summarySource;
    },
  },
  methods: {
    getDateRange,
    countSource(range) {
      let count = 0;
      for (let i = 0; i < this.source.length; i++) {
        let time = new Date(
          this.source[i].eventTime.replace(/-/g, "/")
        ).getTime();
        if (time <= range.max.getTime() && time >= range.min.getTime()) {
          count++;
        }
      }
      return count;
    },
  },
};
</script>
